<template>
  <!-- 开场白组件 -->
  <div class="opening-remarks mb-16">
    <div class="opening-remarks-info">
      <img class="logo" :src="application?.avatar || Avatar" alt="">
      <div>
        <div class="title">{{ application?.name }}</div>
        <div class="description">{{ application?.desc }}</div>
      </div>
    </div>
    <div class="opening-remarks-items" v-if="prologue.tip" style="background-color: #F0F5FF;">
      <div :class="{ tip: true, 'tag-item': prologue.tags.length === 0}" @click="send" style="white-space:pre-line">{{ prologue.tip }}</div>
      <div class="tag">
        <div class="tag-item" v-for="(v, i) in prologue.tags" :key="i" @click="sendMessage(v)">{{ v }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { type chatType } from '@/api/type/application'
import { computed } from 'vue'
import { t } from '@/locales'
import Avatar from '@/assets/agent/avatar.png'
const props = defineProps<{
  application: any
  available: boolean
  type: 'log' | 'ai-chat' | 'debug-ai-chat'
  sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
}>()
const prologue = computed(() => {
  const temp = props.available ? props.application?.prologue : t('chat.tip.prologueMessage')
  if (temp) {
    const tip = temp.split('\\n')[0];
    const tags = temp.split('\\n').slice(1).map((question: string) => question.trim().replace('- ', ''));
    return {
      tip: tip,
      tags: tags
    }
  }
  return {
    tip: temp,
    tags: [],
  }
})
function send() {
  // 点击文字不发送
  return;
  // if (prologue.value.tags.length === 0) {
  //   props.sendMessage(prologue.value.tip)
  // }
}
</script>
<style lang="scss" scoped>
.opening-remarks {
  border: 12px;
  &-info {
    display: flex;
    background: linear-gradient( 90deg, #E7EEFF 0%, #DAEAFF 48%, #DAF4FF 100%);
    padding: 16px;
    align-items: center;
    border-radius: 12px 12px 0 0;
    .logo {
      width: 60px;
      height: 60px;
      margin-right: 16px;
    }
    .title {
      font-weight: 500;
      font-size: 16px;
      color: #191919;
      line-height: 19px;
    }
    .description {
      font-weight: 400;
      font-size: 12px;
      color: #333333;
      line-height: 18px;
    }
  }
  &-items {
    background: #fff;
    border-radius: 0 0 12px 12px;
    padding: 16px;
    &-renderer {

      //.md-editor {
      //  display: none !important;
      //  &:first-child {
      //    display: block;
      //  }
      //}
    }
    .tip {
      font-weight: 400;
      font-size: 14px;
      color: #191919;
      line-height: 17px;
      margin-bottom: 10px;
    }
    .tag {
      display: flex;
      &-item {
        padding: 5px 20px;
        font-size: 12px;
        color: #6489E3;
        background: #F0F5FF;
        border-radius: 4px 4px 4px 4px;
        margin-right: 10px;
        cursor: pointer;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
